<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*样式的层叠问题，设置相同属性，后面会覆盖前面的样式*/
        /*  文字相关
         font-style:字体风格（斜体，正常。。。）
         font-weight:字体粗细
         font-size：字体大小
         font-family:字体系列(黑体，宋体，微软雅黑)
  */
        .pp {
            font-size: 30px;
        }

        .weight {
            /*控制字体粗细*/
            font-weight: 700; /*100-700*/
            /*字体样式*/
            font-style: italic; /*斜体*/
        }

        .style {
            font-style: normal;
        }

        .family {
            /*如果用户电脑没有安装微软雅黑，按黑体显示文字，也没有安装黑体，按照任意一种非衬线字体显示*/
            font-family: 微软雅黑, 黑体, sans-serif;
        }

        /*样式层叠问题*/
        .four {
            color: red;
            color: green;
        }

        /*复合属性，属性写在一起,空格隔开*/
        /*font: style weight size 字体（z只能这么写，可以省略前两个，因为有默认值，前两个也可以另写一行，层叠）*/
        .five {
            font: italic 700 66px 宋体;
            font-style: normal;
        }
    </style>
</head>
<body>
<!--默认字号16-->
<p class="pp">段落文字</p>
<div class="weight">字体加粗font-size</div>
<!--<em>倾斜em</em>-->
<em class="style">em标签但是不倾斜</em>
<p class="family">微软雅黑字体</p>
/*样式层叠问题*/
<div class="four">样式层叠问题，第一个red,第二个green</div>
<!--font复合属性-->
<p class="five">样式复合</p>
</body>
</html>